<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #lb_img {
            display: block;
            background-color: sandybrown;
            width: 30px;
            height: 30px;
            cursor: pointer;
        }

        #menu_index {
            list-style-type: none;
        }
        #menu_index li {
            display: inline-block;
            border: 1px solid red;
            width: 20px;
            height: 20px;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
<input type="button" value="开" id="switch" >
<input type="button" value="关" class="js-close_time">
<p id="time">时间：</p>
<p id="lb_img"></p>
<ul id="menu_index">
    <li class="menu_index_li">1</li>
    <li class="menu_index_li">2</li>
    <li class="menu_index_li">3</li>
    <li class="menu_index_li">4</li>
    <li class="menu_index_li">5</li>
    <li class="menu_index_li">6</li>
    <li class="menu_index_li">7</li>
</ul>
<script>

    /*
    //一次性定时器
    //定义定时器
    var dsq1 = window.setTimeout('alert("123?");alert("456?");', 2000);
    //删除定时器
    window.clearTimeout(dsq1);

    //反复性定时器
    //定义定时器
    var dsq2 = window.setInterval('alert("789?");alert("101112?");', 2000);
    //删除定时器
    window.clearTimeout(dsq2);
    */



    //定义
    var lbFlag = true;   //轮播标志位
    var all = new Array();  //轮播图的数据
    document.getElementsByClassName('js-close_time')[0].addEventListener('click', closeTime);


    //绑定事件
    document.getElementById('switch').addEventListener('click', account);    //开关时间


    document.getElementById('lb_img').addEventListener('mouseover', lb_img_mouseover);  //轮播鼠标悬停
    document.getElementById('lb_img').addEventListener('mouseout', lb_img_mouseout);    //轮播鼠标移出
    document.getElementById('menu_index').addEventListener('mouseover', menu_index_mouseover);
    document.getElementById('menu_index').addEventListener('mouseout', menu_index_mouseout);

    //设置定时器
    var startTime = window.setInterval("setTime()", 1000);
    var startLb = setInterval("setLb(document.getElementById('lb_img'))", 1000);

    //初始化
    init();

    //初始化方法
    function init() {
        all = [1,2,3,4,5,6,7];


    }

    //开关控制
    function account() {
        var bOjb = event.target;
        if(bOjb.value == "开") {
            bOjb.value = "关";

        } else {
            bOjb.value = "开";
        }
    }

    //暂停时间
    function closeTime() {
        var bOjb = event.target;
        if(bOjb.value == "开") {
            bOjb.value = "关";
            startTime = window.setInterval("setTime()", 1000);
        } else {
            bOjb.value = "开";
            window.clearInterval(startTime);
        }
    }

    //
    function setTime() {
        var timeObj = document.getElementById('time');
        var dateObj = new Date();
        var ymd = dateObj.getFullYear() + "-" + dateObj.getMonth() + "-" + dateObj.getDate();
        var his = dateObj.getHours() + ":" + dateObj.getMinutes() + ":" + dateObj.getSeconds();
        timeObj.innerText = "时间：" + ymd + " "+ his;
    }
    
    //轮播
    function lb_img_mouseover()  {
        lbFlag = false;
    };
    function lb_img_mouseout() {
        lbFlag = true;
    };
    //设置轮播
    function setLb(element) {
        if(lbFlag == true) {
            var nowRes = parseInt(element.innerHTML);
            var index = all.indexOf(nowRes);
            if(index > -1) {
                //存在
                if(index+1 > (all.length - 1) ) {
                    element.innerText = all[0];
                } else {
                    element.innerText = all[index + 1];
                }
            } else {
                element.innerText = all[0];
            }
        }
    }

    //鼠标图片轮播悬浮事件：target事件委托（避免循环绑定事件）
    function menu_index_mouseover() {
        var tar = event.target;
        var tagName = tar.nodeName.toLowerCase();
        if(tagName == 'li') {
            //暂停轮播
            lbFlag = false;
            document.getElementById('lb_img').innerText = tar.innerHTML;
        }
    }
    //鼠标图片轮播悬浮移出事件：target事件委托（避免循环绑定事件）
    function menu_index_mouseout() {
        //开始轮播
        var tar = event.target;
        var tagName = tar.nodeName.toLowerCase();
        if(tagName == 'li') {
            //暂停轮播
            lbFlag = true;
        }
    }

</script>
</body>
</html>